<template>
  <div class="container1">
    <div class="container-left1">
      <div class="swiperBox1">
        <span style="fontsize: 50px">轮播图1123</span>
      </div>

      <div class="tabBox1">
        <div class="head">{{arRDs.title}}</div>
        <div class="mains">{{ arRDs.content }}</div>
      </div>
    </div>
    <div class="container-right1">s
      <div class="rightBox11">
        <div class="bbton1">
          <b>recommendToReading</b>
        </div>
        <div class="rightBox">
          <ul v-for="(item,index) in arrSwiper" :key="index" @click="$router.push('/Detail/'+item.id)">
            <li>{{item.title}} · 12 天前</li>
          </ul>
        </div>
      </div>
      <div class="rightBox21">盒子2</div>
    </div>
  </div>
</template>

<script>
import {Daseddt,GetData} from "@/api/index"
export default {
  data() {
    return {
      arrSwiper:[],
      arRDs:[],
    };
  },
  methods:{
    async Daseddt() {
      const {data}=await Daseddt();
      this.arRDs=data.data;
      console.log(data.data);
      console.log(data.data.title,'-------title---------');
    },
    async GetData() {
      const {data}=await GetData();
      this.arrSwiper=data.data;
      console.log(data.data)
    }
  },
  mounted() {
    this.Daseddt();
    this.GetData();
    
  },


};
</script>

<style lang="scss" scoped>
.paiden{
  display: flex;
}
.container1 {
  width: 100%;
  height: 100vh;
  background:#e7eaee;
  position: relative;
  .container-left1 {
    width: 700px;
    height: 100%;
    background: #ddd;
    left: 0;
    position: absolute;
   margin-left: 150px;
    .swiperBox1 {
      height: 300px;
      background: skyblue;
      width: 700px;
      margin-bottom: 15px;
    }
    .tabBox1 {
      width: 700px;
      height: calc(100% - 322px);
      background: skyblue;
      .head{
        width: 660px;
        // 根据内容撑开盒子
        height: auto;
        margin-left: 20px;
        font-size: 40px;
        // 文字加粗
        font-weight: 700;
        text-align: center;
      }
      .mains{
        width: 660px;
        height: auto;
        margin-left: 20px;
      }
    }
  }
  .container-right1 {
    width: 318px;
    height: 100%; 
   position: absolute;
    right: 0;
   margin-right: 310px;
    .rightBox11 {
      width: 318px;
      height: 270px;
      margin-bottom: 30px;
      background:#fff;
      position: relative;
      .rightBox li:hover{
        color: pink;
      } 
      .rightBox li{
        width: 300px;
        height: 28px;
        // 文字溢出部分显示...
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
   
    .rightBox11 ul li{
      margin-top: 10px;
      margin-left: 8px;
    }
    .bbton1{
      width: 318px ;
      height: 40px;
      font-size: 18px;
      border-bottom: 1px solid #000;
      position:relative
      
    }
    .bbton1 b{
      margin-top:8px;
      position:absolute;
      margin-left:5px
    }
   
   .rightBox1{
    width: 318px;
    height: 230px;
   }
    .rightBox1 ul li{
        
      margin-top: 6px;
    }
    .rightBox21{
      width: 310px;
      height: 270px;
      background:pink;
      position: relative;
    }
  }
}
</style>

